{% extends 'base.html' %}

{% block content %}

<!-- 中部区域布局 -->
<div class="container" style="margin-top: 20px; background-color: white; padding: 20px;">
    <div class="row form-group">
        <label for="headline" class="col-1">文章标题</label>
        <input type="text" class="col-11" id="headline"/>
    </div>
    <div class="row">
        <script id="content" type="text/plain">
        </script>
    </div>
    <div class="row form-group" style="margin-top: 20px; padding-top: 10px;">
       <!-- 类型 -->
        <label for="type" class="col-1">类型：</label>
        <select class="form-control col-2" id="main-type">
            {% for key, value in article_type.items() %}
                {% if key < 100 %}
                <option value="{{ key }}"
                        {% if result[0].type // 100 == key %} selected {% endif %}>
                    {{ value }}
                </option>
                {% endif %}
            {% endfor %}
        </select>

        <!-- 子类型 -->
        <select class="form-control col-2" id="sub-type">
            {% if result[0].type %}
                {% for key, value in article_type.items() %}
                    {% if key >= 100 and key // 100 == result[0].type // 100 %}
                    <option value="{{ key }}"
                            {% if result[0].type == key %} selected {% endif %}>
                        {{ value }}
                    </option>
                    {% endif %}
                {% endfor %}
            {% endif %}
        </select>
        <label class="col-1"></label>
        <label for="credit" class="col-1">积分：</label>
        <select class="form-control col-2" id="credit">
            <option value="0">免费</option>
            <option value="1">1分</option>
            <option value="2">2分</option>
            <option value="5">5分</option>
            <option value="10">10分</option>
            <option value="20">20分</option>
            <option value="50">50分</option>
        </select>
        <label class="col-3"></label>
        <button class="form-control btn-primary col-2" onclick="doUserPost()">发布稿件</button>
    </select>
    </div>
</div>

<script type="text/javascript" src="/ue/ueditor.config.js"></script>
<script type="text/javascript" src="/ue/ueditor.all.min.js"> </script>
<script type="text/javascript" src="/ue/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
    let ue = UE.getEditor('content', {
        initialFrameHeight: 400,
        autoHeightEnabled: true,
        serverUrl: '/uedit',
    });

    // 发布用户投稿
    function doUserPost() {
        let headline = $.trim($("#headline").val());
        let contentPlain = UE.getEditor("content").getContentTxt();

        if (headline.length < 5) {
            bootbox.alert({title:"错误提示", message:"标题不能少于5个字"});
            return false;
        }
        else if (contentPlain.length < 100) {
            bootbox.alert({title:"错误提示", message:"内容不能低于100个字"});
            return false;
        }

        // 发送请求时，带上articleid
        let param = "headline=" + headline;
            param += "&content=" + encodeURIComponent(UE.getEditor("content").getContent());
            param += "&type=" + $("#main-type").val();
            param += "&subtype=" + $("#sub-type").val();
            param += "&credit=" + $("#credit").val();
            param += "&drafted=0&checked=0&articleid=0";
        $.post('/article', param, function (data) {
            if (data === 'perm-denied') {
                bootbox.alert({title:"错误提示", message:"权限不足，无法投稿."});
            }
            else if (data === 'post-fail') {
                bootbox.alert({title:"错误提示", message:"投稿失败，请联系管理员."});
            }
            else if (data.match(/^\d+$/)) {
                bootbox.alert({title:"信息提示", message:"恭喜你，投稿成功，审核后即可发布."});
                setTimeout(function () {
                    location.href = '/user/article';  // 跳转到我的文章页面
                }, 1000);
            }
            else {
                bootbox.alert({title:"错误提示", message:"投稿失败，可能没有权限."});
            }
        });
    }
</script>

{% endblock %}